<template>
  <div style="padding:10px">
  <!-- 功能区域 -->
    <div style="margin:10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button @click="axiosPro">导入</el-button>
      <el-button>导出</el-button>
    </div>
  <!-- 搜索区域 -->
    <div style="margin:10px 0">
      <el-input v-model="search" placeholder="请输入关键词" style="width:20%" clearable></el-input>
      <el-button type="primary" style="margin-left:10px" @click="load">查询</el-button>
    </div>
<!--    table-->
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="id" label="ID"  sortable/>
      <el-table-column prop="username" label="用户名"  />
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="封面" >
        <template #default="scope" >
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
              preview-teleported="true">
          </el-image>
        </template>
      </el-table-column>>

      <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.row.id)">
        <template #reference>
          <el-button type="text" size="small" >删除</el-button>
        </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    </el-table>
<!--分页器-->
     <div style="margin:10px 0">
<!--       v-model:currentPage="currentPage"-->
<!--       v-model:page-size="pageSize4"-->
      <el-pagination
      :currentPage="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
<!--新增-弹窗-->
       <el-dialog
           v-model="dialogVisible"
           title="提示"
           width="30%"
       >
         <el-form :model="form" label-width="120px">
           <el-form-item label="用户名">
             <el-input v-model="form.username" style="width:80%"/>
           </el-form-item>
           <el-form-item label="昵称">
             <el-input v-model="form.nickName" style="width:80%"/>
           </el-form-item>
           <el-form-item label="年龄">
             <el-input v-model="form.age" style="width:80%"/>
           </el-form-item>
           <el-form-item label="性别">
             <el-radio v-model="form.sex"  label="男" >男</el-radio>
             <el-radio v-model="form.sex"  label="女">女</el-radio>
             <el-radio v-model="form.sex"  label="未知">未知</el-radio>
           </el-form-item>
           <el-form-item label="地址">
             <el-input type="textarea" v-model="form.address" style="width:80%"/>
           </el-form-item>

           <el-form-item label="封面">
             <el-upload
                 v-model:file-list="fileList"
                 action="http://localhost:9090/files/upload"
                 ref="upload"
                 multiple
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 :before-remove="beforeRemove"
                 :on-exceed="handleExceed"
                 :on-success="filesUploadSuccess"
             >
<!--               这里用到了on-success,文件上传成功后的回调地址-->
               <el-button type="primary">点击上传</el-button>
               <template #tip>
                 <div class="el-upload__tip">
                   jpg/png files with a size less than 500KB.
                 </div>
               </template>
             </el-upload>
           </el-form-item>
         </el-form>
         <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="save">Confirm</el-button>
      </span>
         </template>
       </el-dialog>
    </div>
  </div>
</template>

<script>
import { dataType } from 'element-plus/es/components/table-v2/src/common';
import request from "@/utils/Request";
import axios from "axios";



export default {
  name: 'Home',
  components: {

  },
  data(){
    return{
      form:{},
      // form为对象
      dialogVisible:false,
      search:'',
      currentPage:1,
      pageSize:10,
      total:0,
      tableData:[]
    }
  },
  created() {
    this.load()
  },
  methods:{
    axiosPro(){
      console.log(axios)
      const result = axios({
        method:'GET',
        url:'http://liulongbin.top:3006/api/getBooks'
      })
      result.then(function(books){
        console.log(books)
      })
    },
    filesUploadSuccess(res){
      console.log(res)
      this.form.cover = res.data
    },
    load(){
      request.get("user", {
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res=>{
        console.log(res)
        this.tableData = res.data.records
        this.total=res.data.total
      })
    },
    add(){
      this.dialogVisible=true
      this.form={}
      this.$refs['upload'].clearFiles()//清除历史文件列表
    },
    save(){
      if(this.form.id){//更新
        request.put("/user", this.form).then(res =>{
          console.log(res)
          if(res.code === '0'){
            this.$message({
              type:"success",
              message:"更新成功"
            })
          }else{
            this.$message({
              type:"error",
              message:res.msg
            })
          }
        })
      }
      else{//新增
        request.post("/user", this.form).then(res =>{
          console.log(res)
          if(res.code === '0'){
            this.$message({
              type:"success",
              message:"新增成功"
            })
          }else{
            this.$message({
              type:"error",
              message:res.msg
            })
          }
        })
      }
      this.load() //刷新表格数据
      this.dialogVisible = false //关闭弹窗
    },
    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
      this.$nextTick(()=>{
        this.$refs['upload'].clearFiles()//清除历史文件列表
      })
    },
    handleDelete(id){
      console.log(id)
      request.delete("/user/" + id).then(res =>{
        if(res.code === '0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
        this.load()//删除后重新加载表格数据
      })
    },
    handleSizeChange(pageSize){//改变当前每页个数
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum){//改变当前页面
      this.currentPage=pageNum
      this.load()
    }

  }
}
</script>
